<template>
	
	<div>
		<header class="navigation">
			<div @click="retreat"><img src="../assets/rightbut.png"></div>
			<div>投诉建议</div>
			<div></div>
		</header>
		
		<div class="complaint">你遇到的问题？</div>
		
		<div class="complaintissue">
			<div class="complaintissue_d">
				<input type="radio" name="a" value="001" v-model='inputval'/>
				<div>内容建议</div>
			</div>
			<div class="complaintissue_d">
				<input type="radio" name="a" value="002" v-model='inputval'/>
				<div>产品建议</div>
			</div>
			<div class="complaintissue_d">
				<input type="radio" name="a" value="003" v-model='inputval'/>
				<div>软件问题</div>
			</div>
			<div class="complaintissue_d">
				<input type="radio" name="a" value="004" v-model='inputval'/>
				<div>其他问题</div>
			</div>
		</div>
		
		<div class="content">
			
			<textarea name="" rows="6" cols="" placeholder="请你详细补充问题或建议" ref='content'></textarea>
			
		</div>
		
		
		<div class="addimg">
			<el-upload
			  class="upload-demo"
			  action="https://www.uhuijia.com.cn/image-server/uploadImage/oss"
			  :on-success='ok'
			  :file-list="fileList2"
			  list-type="picture"
			  :limit='3'
			  >
			  <el-button size="small" type="primary">点击上传</el-button>
			</el-upload>
		</div>
		<div class="addimg_d">
			<div v-for="item in img"><img :src="item"></div>
		</div>
		
		<div class="way">
			<div class="wayimg"><img src="../assets/my.png"></div>
			<div class="way_d">
				<div>联系人</div>
				<div><input type="text" placeholder="×××" ref='name'/></div>
			</div>
		</div>
		<div class="way">
			<div class="wayimg"><img src="../assets/tel.png"></div>
			<div class="way_d">
				<div>联系电话</div>
				<div><input type="tel" placeholder="***********" maxlength="11" ref='tel'/></div>
			</div>
		</div>
		
		<div class="bottom">您的反馈提交后，我们将有专人负责处理。</div>
		
		<div class="submit" @click="submiton">提交</div>
		
	</div>
	
</template>

<script>
	import { Toast } from 'mint-ui';
	import { BaseUrl } from '../Baseurl/common.js';
	export default{
		data(){
			return{
				inputval:'',
				img:[],
				token:'',
				fileList2:[],
			}
		},
		created(){
			this.token = localStorage.getItem('token');
		},
		methods:{
			ok:function(file){
				this.img.push(file.data.url)
			},
			//导航退后
			retreat:function(){
				window.history.go(-1);
			},
        	//提交 
        	submiton:function(){
        		var content = this.$refs.content.value;
        		var tel = this.$refs.tel.value;
        		var name = this.$refs.name.value;
        		var img = String(this.img);
        		      		
        		var url = BaseUrl + 'users/complaint/submit?token=' + this.token + '&appId=wap' + '&content=' + content + '&img=' + img + '&reason=' + this.inputval + '&phone=' + tel + '&name=' + name;
				      		if(content !='' && this.inputval !='' && this.tel !='' && this.name !=''){
				      			this.$http.post(url).then(res=>{
				      				if(res.data.code == '10000'){
				      					Toast({
												message: "提交成功",
												position: 'middle',
												duration: 3000
											})
				      				}
				      			}).catch(error=>{
										Toast({
											message: "网络异常",
											position: 'middle',
											duration: 3000
										})
									})
				      		}else{
				      			Toast({
										message: "请完善内容",
										position: 'middle',
										duration: 3000
									})
				      		}
				
        		
        }
		}
	}
</script>

<style scoped="scoped">
	.navigation{
		height: 1rem;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #E3E3E3;
		padding: 0 0.25rem;
		color: #323232;
		font-size: 0.36rem;
	}
	
	.navigation img{
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}	
	.complaint{
		border-top: 0.1rem solid #F2F2F2;
		padding: 0.2rem 0.25rem;
		font-size: 0.35rem ;
		color: #323232;
		letter-spacing: 2px;
	}
	.complaintissue{
		padding: 0.2rem 0.25rem;
		display: flex;
	}
	.complaintissue_d{
		display: flex;
		margin-right:0.1rem;
		color: #323232;
		font-size: 0.2rem;
	}
	.complaintissue_d input{
		width: 0.4rem;
		height: 0.4rem;
		margin-right: 0.1rem;
		outline: none;
	}
	.content{
		padding: 0 0.25rem;
	}
	.content textarea{
		width: 100%;
		border: 1px solid #CCCCCC;
		border-radius: 0.1rem;
		background: #F2F2F2;
		outline: none;
		padding: 0.1rem;
	}
	
	.addimg{
		background: #fff;
		padding: 0.2rem 0.2rem;
		height: 1.1rem;
		overflow: hidden;
	}
	.addimg ul{
		display: none!important;
	}
	.addimg_d{
		height: 2rem;
		display: flex;
		margin-bottom: 0.2rem;
	}
	.addimg_d div{
		width: 33%;
		margin: 0.1rem;
	}
	.addimg_d div img{
		width: 100%;
		height: 100%;
	}
	.add{
		width: 33%;
		height: 2rem;
		background-image: url(../assets/add.png);
		background-size: 100% 100%;
		margin-left: 0.25rem;
	}
	.file{
		width: 1.5rem;
		height: 4.5em;
		opacity: 0;
	}
	.way{
		padding: 0.2rem  0.25rem;
		border-bottom: 1px solid #989898;
		display: flex;
		align-items: center;
	}
	.wayimg{
		margin: 0 0.4rem;
	}
	.way_d{
		color: #989898;
		font-size: 0.26rem;
	}
	.way_d input{
		border: none;
		outline:  none;
	}
	.bottom{
		text-align: center;
		color: #989898;
		font-size: 0.26rem;
		padding: 0.2rem 0 0.4rem 0;
	}
	.submit{
		color: #fff;
		font-size: 0.26rem;
		background: #e3e3e3;
		text-align: center;
		padding: 0.2rem 0;
	}
</style>